<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Basic example</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
     
    <div class="container-fluid" id="app">
      <button @click="enableEdit">Toggle Edit</button>
      <div>
      Drag enabled: {{!edit}}
      </div>
      <div v-for="machine in machines">

        <div class="container-fluid machine-contents">

          <draggable :list="machine.jobs" :options="{'disabled':edit}" @update="update">
            <transition-group name="list-complete">
              <div v-for="(job, index) in machine.jobs" v-bind:key="job.jobNumber" class="list-complete-item">
                <div>
                  {{ job.jobNumber }}
                </div>
                <div>
                  <br>
                  <button v-on:click="removeJob(machine.id, job.jobNumber, machine.jobs, index)">Remove</button>
                </div>
              </div>
            </transition-group>
          </draggable>

        </div>

      </div>

    </div>

        <script type="text/javascript" src="libs\vue\dist\vue.js"></script>
        <script type="text/javascript" src="libs\Sortable\Sortable.js"></script>
        <script type="text/javascript" src="src\vuedraggable.js"></script>
        <script type="text/javascript" src="script\disable.js"></script>
    </body>
</html>